<template>
	<view class="shopEdit">
		<view class="shopEditMain">
			<view class="shopEditLi flex">
				<view class="shopEditLiTitle">
					更换店铺图片
				</view>
				<view class="shopEditLiContent shopEditLiContentTitle" @click="cli_unImg">
					<image class="shopEditLiContentTitleImg" :src=agentImage mode=""></image>
				</view>
				<view class="shopEditLiRight">
					<image class="shopEditLiRightImg" src="https://www.zzzsyh.com/applets/agent/agent/right-two.png" mode=""></image>
				</view>
			</view>

			<view class="shopEditLi">
				<view class="shopEditLiTitle">
					店铺名称
				</view>
				<view class="shopEditLiContent">
					<!-- {{agentCompanyName}} -->
					<input v-model="agentCompanyName" placeholder-class="inputplace" placeholder="请输入店铺名称" class="shopEditLiContentInput" type="text"
						value="" />
				</view>
			</view>

			<view class="shopEditLi">
				<view class="shopEditLiTitle">
					主要产品
				</view>
				<view class="shopEditLiContent">
					<!-- {{agentContent}} -->
					<input v-model="agentContent"placeholder-class="inputplace" placeholder="请输入主要产品" class="shopEditLiContentInput" type="text"
						value="" />
				</view>
			</view>

			<view class="shopEditLi" @click="cli_fuwu">
				<view class="shopEditLiTitle">
					服务承诺
				</view>
				<view class="shopEditLiContent shopEditLiContentFW">
					<text class="shopEditLiContentFW-txt" v-for="(item,index) in changeserviceName(serviceName)"
						:key="index">{{item}}</text>
				</view>
				<view class="shopEditLiRight">
					<image class="shopEditLiRightImg" src="https://www.zzzsyh.com/applets/agent/agent/right-two.png" mode=""></image>
				</view>
			</view>

			<view class="shopEditLi" @click="cli_goaddress">
				<view class="shopEditLiTitle">
					所在地区
				</view>
				<view class="shopEditLiContent">
					<view class=""  v-if="agentProvinceName">
						{{agentProvinceName}}{{agentCityName}}{{agentDistrictName}} 
					</view>
				</view>
				<view class="shopEditLiRight">
					<image class="shopEditLiRightImg" src="https://www.zzzsyh.com/applets/agent/agent/right-two.png" mode=""></image>
				</view>
			</view>

			<view class="shopEditLi">
				<view class="shopEditLiTitle">
					详细地址
				</view>
				<view class="shopEditLiContent">
					<input v-model="agentAddress"placeholder-class="inputplace" placeholder="请输入详细地址" class="shopEditLiContentInput" type="text"
						value="" />
				</view>
			</view>
		</view>
		<view class="shopEditBtn">
			<view v-if="showOk" class="shopEditBtnBox font_blod" @click="cli_ok">
				保存
			</view>
			<view v-else class="shopEditBtnBox shopEditBtnBoxNo font_blod" @click="cli_no">
				保存
			</view>
			
		</view>
		<uni-popup ref="popup_fuwu" type="bottom">
			<view class="popFuwu">
				<view class="popFuwuTitle font_blod">
					请选择标签
				</view>
				<view class="popFuwuMain">
					<view class="popFuwuMainLi" @click="cli_fuwuLi(item,index)" v-for="(item,index) in list_fuwu"
						:key="index">
						<text class="popFuwuMainLiTxt"
							:class="[item.show == true? 'popFuwuMainLiTxtOk': '']">{{item.promiseName}}</text>
					</view>
				</view>
				<view class="popFuwuBtn">
					<view class="popFuwuBtnBox popFuwuBtnBoxLeft font_blod" @click="cli_closeFuwu">
						取消
					</view>
					<view class="popFuwuBtnBox popFuwuBtnBoxRight font_blod" @click="cli_okFuwu">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 选择地址 -->
		<uni-popup ref="popup" type="bottom" :mask-click="false">
			<view class="add-pop-btm">
				<view class="apb-head">
					<text></text>
					<text class="apb-head-txt">所在地区</text>
					<image class="apb-head-img" src="https://www.zzzsyh.com/applets/agent/agent/close.png" mode="" @click="cli_closePop">
					</image>
				</view>
				<view class="apd-chan">
					<view class="apd-chan-box" v-if="listNum == 2 || listNum == 3 || listNum == 4"
						@click="cli_address_pro">
						<text class="apd-chan-txt">{{pro}}</text>
					</view>
					<view class="apd-chan-box" v-if="listNum == 3 || listNum == 4" @click="cli_address_city">
						<text class="apd-chan-txt">{{city}}</text>
					</view>
					<view class="apd-chan-box" v-if="listNum == 4" @click="cli_address_country">
						<text class="apd-chan-txt">{{country}}</text>
					</view>
					<view class="apd-chan-box" v-if="show_title">
						<text class="apd-chan-txt">请选择</text>
						<view class="apd-chan-btm apdChanBtmColor"></view>
					</view>
				</view>
				<view class="apd-li-box">
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="apd-li" v-if="listNum == 1" v-for="(item, index) of list_pro" :key="index"
							@click="cli_pop_li1(item, index)">
							<text :class="{apdLiTxt : popImgNum1 == index}">{{item.areaName}}</text>
							<!-- <image class="apd-li-img" v-show="popImgNum1 == index" src="../../static/mycenter/15.png"
								mode=""></image> -->
						</view>
						<view class="apd-li" v-if="listNum == 2" v-for="(item, index) of list_city" :key="index"
							@click="cli_pop_li2(item, index)">
							<text :class="{apdLiTxt : popImgNum2 == index}">{{item.areaName}}</text>
							<!-- <image class="apd-li-img" v-show="popImgNum2 == index" src="../../static/mycenter/15.png"
								mode=""></image> -->
						</view>
						<view class="apd-li" v-if="listNum == 3" v-for="(item, index) of list_country" :key="index"
							@click="cli_pop_li3(item, index)">
							<text :class="{apdLiTxt : popImgNum3 == index}">{{item.areaName}}</text>
							<!-- <image class="apd-li-img" v-show="popImgNum3 == index" src="../../static/mycenter/15.png"
								mode=""></image> -->
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	export default {
		data() {
			return {
				agentId: uni.getStorageSync('agentId'),
				agentImage: '', // 门头照
				agentCompanyName: '', // 店铺名称
				agentContent: '', // 主营产品
				serviceName: [], //服务承诺，数组
				agentProvince: '', // 省级名
				agentProvinceName: '',
				agentCity: '', // 市
				agentCityName: '',
				agentDistrict: '', // 县、区
				agentDistrictName: '',
				agentAddress: '', // 详细地址
				list_fuwu: [], // 服务承诺数组列表
				
				popImgNum1: -1,
				popImgNum2: -1,
				popImgNum3: -1,
				listNum: 1,
				list_pro: [],
				list_city: [],
				list_country: [],
				area: '',
				pro: '',
				pro_id: '',
				city: '',
				city_id: '',
				country: '',
				country_id: '',
				// showOk: false, // 保存按钮
			}
		},
		computed: {
			showOk () {
				if (this.agentImage && this.agentCompanyName && this.agentContent && this.agentDistrict && this.agentAddress && this.serviceName ) {
					return true
				}else {
					return false
				}
			}
		},
		mounted() {
			// 获取店铺信息
			this.getAgentInfoById()
			this.get_getAreaByPid('', 1)
		},
		methods: {
			cli_goaddress() {
				this.show_title = true
				this.listNum = 1
				this.popImgNum1 = -1
				this.popImgNum2 = -1
				this.popImgNum3 = -1
				this.$refs.popup.open()
			},
			// 点击关闭弹窗
			cli_closePop() {
				this.$refs.popup.close()
			},
			// 点击所在省市县
			cli_address_pro() {
				this.listNum = 1
			},
			cli_address_city() {
				this.listNum = 2
			},
			cli_address_country() {
				this.cli_address_country = false
				this.listNum = 3
			},
			// 点击地址列表
			cli_pop_li1(item, index) {
				this.popImgNum1 = index
				this.get_getAreaByPid(item.id, 2)
				this.listNum = 2
				this.pro = item.areaName
				this.pro_id = item.id
			},
			cli_pop_li2(item, index) {
				this.popImgNum2 = index
				this.get_getAreaByPid(item.id, 3)
				this.listNum = 3
				this.city = item.areaName
				this.city_id = item.id
			},
			cli_pop_li3(item, index) {
				this.popImgNum3 = index
				this.listNum = 4
				this.show_title = false
				this.country = item.areaName
				this.country_id = item.id
				this.agentProvince = this.pro_id
				this.agentProvinceName = this.pro
				this.agentCity = this.city_id
				this.agentCityName = this.city
				this.agentDistrict = this.country_id
				this.agentDistrictName = this.country
				this.$refs.popup.close()
				// this.area = this.pro + this.city + this.country
			},
			// 点击服务承诺
			cli_fuwu() {
				// 获取所有的服务承诺列表
				this.getPromiseList()

			},
			// 打开关闭服务弹窗
			cli_closeFuwu() {
				this.$refs.popup_fuwu.close()
			},
			cli_okFuwu() {
				let list = this.list_fuwu
				let vals = list.filter(item => {
					return item.show == true
				})
				console.log(vals);
				let dat = ''
				vals.map(e => {
					if (dat) {
						dat = dat + ',' + e.promiseName
					} else {
						dat = e.promiseName
					}
				})
				let v = dat.split(',')
				console.log(v);
				this.serviceName = v
				this.$refs.popup_fuwu.close()
			},
			// 点击选择服务
			cli_fuwuLi(item, index) {
				item.show = !item.show
			},
			// 上传店铺图片
			cli_unImg() {
				let _that = this
				uni.chooseImage({
					count:1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: allapi.upload, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								let dat = uploadFileRes.data
								let msg = JSON.parse(dat)
								let imgurl = msg.url
								// console.log(msg);
								_that.agentImage = imgurl
								// console.log(_that.list);
							}
						});
					}
				});
			},
			// cli_no
			cli_no () {
				if (!this.agentImage) {
					uni.showToast({
						title: '请先完善店铺图片',
						icon: 'none'
					})
				}else if (!this.agentCompanyName) {
					uni.showToast({
						title: '请先完善店铺名称',
						icon: 'none'
					})
				}else if (!this.agentContent) {
					uni.showToast({
						title: '请先完善主要产品',
						icon: 'none'
					})
				}else if (!this.serviceName) {
					uni.showToast({
						title: '请先选择服务承诺',
						icon: 'none'
					})
				}else if (!this.agentDistrict) {
					uni.showToast({
						title: '请先选择所在地区',
						icon: 'none'
					})
				}else if (!this.agentAddress) {
					uni.showToast({
						title: '请先完善详细地址',
						icon: 'none'
					})
				}
				
			},
			// 点击保存
			cli_ok() {
				this.updateAgentInfo()
			},
			// 保存店铺信息
			updateAgentInfo() {
				console.log(this.serviceName);
				let serviceName
				if (this.serviceName) {
					serviceName = this.serviceName.toString()
				}else {
					serviceName = ''
				}
				
				console.log(serviceName);
				uni.request({
					url: allapi.updateAgentInfo,
					data: {
						agentId: this.agentId,
						agentImage: this.agentImage,
						agentCompanyName: this.agentCompanyName,
						agentContent: this.agentContent,
						agentService: serviceName,
						pCode: this.agentProvince,
						pName: this.agentProvinceName,
						cCode: this.agentCity,
						cName: this.agentCityName,
						aCode: this.agentDistrict,
						aName: this.agentDistrictName,
						address: this.agentAddress,
					},
					success: (res) => {
						console.log(res);
						uni.navigateBack()
					}

				})
			},
			// 获取店铺信息
			getAgentInfoById() {
				uni.request({
					url: allapi.getAgentInfoById,
					data: {
						agentId: this.agentId
					},
					success: (res) => {
						console.log('店铺信息',res);
						let dat = res.data.data
						this.agentImage = dat.agentImage
						this.agentCompanyName = dat.agentCompanyName
						this.agentContent = dat.agentContent
						this.serviceName = dat.serviceName
						this.agentProvince = dat.agentProvince
						this.agentProvinceName = dat.agentProvinceName
						this.agentCity = dat.agentCity
						this.agentCityName = dat.agentCityName
						this.agentDistrict = dat.agentDistrict
						this.agentDistrictName = dat.agentDistrictName
						this.agentAddress = dat.agentAddress
					}
				})
			},
			// 获取所有的服务承诺列表
			getPromiseList() {
				uni.request({
					url: allapi.getPromiseList,
					data: {

					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						let lists = []
						let serviceName = this.serviceName
						dat.map(e => {
							lists.push(
								Object.assign(e, {
									show: false
								})
							)
						})
						console.log(66666, serviceName);
						if (serviceName && serviceName.length > 0) {
							serviceName.map(i => {
								lists.map(e => {
									if (e.promiseName == i) {
										e.show = true
									}
								})
							})
						}
						
						this.list_fuwu = lists
						this.$refs.popup_fuwu.open()
					}
				})
			},
			// 获取地址信息
			get_getAreaByPid(pid, num) {
				let _that = this
				uni.request({
					url: allapi.getAreaByPid,
					data: {
						pid: pid
					},
					success: (res) => {
						let dat = res.data.data
						// console.log(dat);
						if (num == 1) {
							_that.list_pro = dat
						} else if (num == 2) {
							_that.list_city = dat
						} else if (num == 3) {
							_that.list_country = dat
						}
					}
				})
			},
			// 服务承诺截取、
			changeserviceName (val) {
				if (val) {
					return val.slice(0, 3)
				}else {
					return []
				}
			}
		}
	}
</script>

<style scoped>
	.flex {
		display: flex;
		align-items: center;
	}

	.shopEdit {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
	}

	.shopEditMain {
		flex: 1;
		overflow: auto;
	}

	.shopEditLi {
		background: #FFFFFF;
		border-radius: 8rpx;
		padding: 28rpx 24rpx;
		margin: 24rpx;
		display: flex;
		align-items: center;
	}

	.shopEditLiTitle {
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
	}

	.shopEditLiContent {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		flex: 1;
		margin-left: 24rpx;
		margin-right: 24rpx;
	}

	.shopEditLiContentInput {}

	.shopEditLiContentTitle {}

	.shopEditLiContentTitleImg {
		width: 84rpx;
		height: 84rpx;
		border-radius: 8rpx;
		background: #EEEEEE;
		float: right;
	}

	.shopEditLiRightImg {
		width: 32rpx;
		height: 32rpx;
	}

	.shopEditLiContentFW-txt {
		padding: 6rpx 8rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #41CA5B;
		background: #EFFBE4;
		border-radius: 8rpx;
		margin-right: 16rpx;
	}

	.shopEditBtn {
		height: 92rpx;
		margin: 40rpx;
	}

	.shopEditBtnBox {
		height: 92rpx;
		background: linear-gradient(90deg, #2ACE52 0%, #1DC248 100%);
		border-radius: 46rpx;
		line-height: 92rpx;
		text-align: center;
		font-size: 36rpx;
		color: #FFFFFF;
	}
	.shopEditBtnBoxNo {
		opacity: 0.5;
	}
	.popFuwu {
		/* height: 926rpx; */
		max-height: 924rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0px 0px;
		display: flex;
		flex-direction: column;
		padding: 48rpx 0rpx;

	}

	.popFuwuTitle {
		margin: 0 32rpx;
	}

	.popFuwuMain {
		flex: 1;
		overflow: auto;
		margin: 64rpx 16rpx;
	}

	.popFuwuMainLi {
		width: 33.33%;
		height: 110rpx;
		float: left;
		display: flex;
		align-items: center;
		justify-content: center;
		/* margin-top: 32rpx; */
	}

	.popFuwuMainLiTxt {
		display: block;
		width: 206rpx;
		height: 74rpx;
		line-height: 78rpx;
		text-align: center;
		border: 2rpx solid #DDDDDD;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.popFuwuMainLiTxtOk {
		width: 210rpx;
		height: 78rpx;
		background: #EFFBE4;
		border: none;
		color: #41CA5B;
	}

	.popFuwuBtn {
		display: flex;
		justify-content: space-between;
		box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.12);
		padding: 16rpx 32rpx;
	}

	.popFuwuBtnBox {
		width: 296rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #F3F5F6;
		border-radius: 44rpx;
		font-size: 32rpx;
	}

	.popFuwuBtnBoxLeft {
		background: #F3F5F6;
		color: #333333;
	}

	.popFuwuBtnBoxRight {
		background: linear-gradient(90deg, #2ACE52 0%, #1DC248 100%);
		color: #FFFFFF;
	}

	.add-pop-btm {
		width: 100%;
		height: 960rpx;
		background: #fff;
		border-top-right-radius: 24rpx;
		border-top-left-radius: 24rpx;
	}

	.apb-head {
		height: 92rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;
		margin: 0 24rpx;
	}

	.apb-head-txt {
		color: #333333;
		font-size: 30rpx;
	}

	.apb-head-img {
		width: 48rpx;
		height: 48rpx;
	}

	.apd-chan {
		height: 96rpx;
		align-items: center;
		display: flex;
		font-size: 28rpx;
		color: #333333;
		padding: 0 24rpx;
		border-top: 2rpx solid #DDDDDD;
		border-bottom: 2rpx solid #DDDDDD;
	}

	.apd-chan-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-right: 48rpx;
	}

	.apd-chan-txt {
		height: 56rpx;
		line-height: 56rpx;
		margin-bottom: 6rpx;
	}

	.apd-chan-btm {
		width: 56rpx;
		height: 4rpx;
		background: #FFFFFF;
		border-radius: 2rpx;
	}

	.apdChanBtmColor {
		background: #F76B1F !important;
	}

	.apd-li-box {
		padding: 20rpx 24rpx;
		overflow: auto;
		height: 620rpx;
	}
	.scroll-Y {
		height: 100%;
	}
	.apd-li {
		height: 80rpx;
		color: #333333;
		line-height: 80rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.apdLiTxt {
		color: #F76B1F !important;
	}

	.apd-li-img {
		width: 40rpx;
		height: 30rpx;
	}
</style>
